<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <!-- 演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定： -->
        <p>input 元素：</p>
        <input v-model="message" placeholder="编辑我……">
        <p>input 表单消息是: {{ message }}</p>

        <p>textarea 元素：</p>
        <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
        <p>textarea 表单消息是:</p>
        <p style="white-space: pre">{{ message2 }}</p>

        <hr>
        <!-- 复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组： -->
        <p>单个复选框：</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>

        <p>多个复选框：</p>
        <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
        <label for="runoob">Runoob</label>
        <input type="checkbox" id="google" value="Google" v-model="checkedNames">
        <label for="google">Google</label>
        <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
        <label for="taobao">taobao</label>
        <br>
        <span>选择的值为: {{ checkedNames }}</span>

        <hr>
        <!-- 实例中演示了单选按钮的双向数据绑定： -->
        <input type="radio" id="runoob" value="Runoob" v-model="picked">
        <label for="runoob">Runoob</label>
        <br>
        <input type="radio" id="google" value="Google" v-model="picked">
        <label for="google">Google</label>
        <br>
        <span>选中值为: {{ picked }}</span>

        <hr>
        <!-- 实例中演示了下拉列表的双向数据绑定： -->
        <select v-model="selected" name="site">
            <option value="">选择一个网站</option>
            <option value="www.runoob.com">Runoob</option>
            <option value="www.google.com">Google</option>
        </select>

        <div id="output">
            选择的网站是: {{selected}}
        </div>
        <!-- 多选时会绑定到一个数组： -->
        <select name="fruit" multiple @change="updateSelected2">
            <option value="www.runoob.com" v-bind:selected="selected2.includes('www.runoob.com')">Runoob</option>
            <option value="www.google.com" v-bind:selected="selected2.includes('www.google.com')">Google</option>
            <option value="www.taobao.com" v-bind:selected="selected2.includes('www.taobao.com')">Taobao</option>
        </select>

        <div id="output2">
            选择的网站是: {{selected2}}
        </div>

        <hr>
        <!-- 使用 v-for 循环输出选项： -->
        <select v-model="selected3">
            <option v-for="option in options" :value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span>选择的是: {{ selected3 }}</span>
    </div>

    <script>
        const app = {
            data() {
                return {
                    message: '',
                    message2: '菜鸟教程\r\nhttps://www.runoob.com',
                    checked: false,
                    checkedNames: [],
                    picked: 'Runoob',
                    selected: '',
                    selected2: [],
                    selected3: 'www.runoob.com',
                    options: [
                        { text: 'Runoob', value: 'www.runoob.com' },
                        { text: 'Google', value: 'www.google.com' },
                        { text: 'Taobao', value: 'www.taobao.com' }
                    ]
                }
            },
            methods: {
                updateCheckedNames(value) {
                    if (this.checkedNames.includes(value)) {
                        const index = this.checkedNames.indexOf(value);
                        this.checkedNames.splice(index, 1);
                    } else {
                        this.checkedNames.push(value);
                    }
                },
                updateSelected2(event) {
                    const selectedOptions = event.target.options;
                    const selectedValues = [];
                    for (let i = 0; i < selectedOptions.length; i++) {
                        if (selectedOptions[i].selected) {
                            selectedValues.push(selectedOptions[i].value);
                        }
                    }
                    this.selected2 = selectedValues;
                },
            },
        }

        Vue.createApp(app).mount('#app')
    </script>
</body>

</html>